import { useSuspenseQuery } from "@tanstack/react-query";
import { createFileRoute } from "@tanstack/react-router";
import * as React from "react";
import { TestsTable } from "@/components/tests/tests-table";
import { reportQueryOptions } from "@/queries/reports";
import { testsQueryOptions } from "@/queries/tests";
import { useSelectedTestStore } from "@/stores/useSelectedTestStore";

export const Route = createFileRoute("/_app/reports_/$id")({
  loader: ({ params: { id }, context: { queryClient } }) => {
    queryClient.ensureQueryData(reportQueryOptions(id));
    queryClient.ensureQueryData(testsQueryOptions(id));
  },
  component: TestsPage,
});

function TestsPage() {
  const { id } = Route.useParams();
  const { data: report } = useSuspenseQuery(reportQueryOptions(id));
  const { data: tests } = useSuspenseQuery(testsQueryOptions(id));

  const { selectTest } = useSelectedTestStore();
  React.useEffect(() => selectTest(tests[0]), [tests, selectTest]);

  return (
    <div className="flex h-full w-full flex-1 flex-col">
      {/* <TabsDemo /> */}
      <TestsTable report={report} tests={tests} />
    </div>
  );
}
